<section class="size_middle">
    <div
        role="dialog"
        id="product-forms"
        aria-modal="true"
        aria-labelledby="product-forms_title"
    >
        <div class="modal_layout">
            <header>
                <button
                    class="icon only unstyled close"
                    title="Fermer cette fenêtre"
                    aria-label="Fermer cette fenêtre"
                    type='button'
                >
                    <svg>
                        <use href="/static/icons/endi.svg#times"></use>
                    </svg>
                </button>
                <h2 id="product-forms_title">
                    {{title}}
                </h2>
            </header>
            {{#if add}}
            <nav>
                <ul class="nav nav-tabs modal-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a
                            href="#form-container"
                            aria-controls="form-container"
                            id="form-tabtitle"
                            role="tab"
                            data-toggle="tab"
                            tabindex="-1"
                        >
                            Saisie libre
                        </a>
                    </li>
                    <li role="presentation">
                        <a
                            href="#catalog-container"
                            aria-controls="catalog-container"
                            id="catalog-tabtitle"
                            role="tab"
                            tabindex="-1"
                            data-toggle="tab"
                        >
                            Depuis le catalogue
                        </a>
                    </li>
                </ul>
            </nav>
            {{/if}}
            <div class="tab-content">
                <div
                    role="tabpanel"
                    class="tab-pane fade in active"
                    id="form-container"
                    aria-labelledby="form-tabtitle"
                >
                    <form class="modal_content_layout layout product-form">
                        <div class="modal_content">
                            {{#if raw_create}}
                            <div class="alert alert-info">
                                {{{help_text}}}
                            </div>
                            {{else if locked}}
                            <div class="alert alert-info alert-locked">
                                <button
                                    class="btn unlock icon only"
                                    type="button"
                                    title="Délier ce champ de l’entrée du catalogue produit correspondante"
                                >
                                    <svg>
                                        <use href="/static/icons/endi.svg#link"></use>
                                    </svg>
                                </button>
                                Cet élément est lié au produit du catalogue correspondant <strong>{{label}}</strong>.
                                <br />
                                Les modifications apportées aux champs «&nbsp;hérité(e) du catalogue&nbsp;» seront répercutés sur ce produit.
                            </div>
                            {{else}}
                            <div class="alert alert-info">
                                <span class="icon only">
                                    <svg>
                                        <use href="/static/icons/endi.svg#lock-open"></use>
                                    </svg>
                                </span>
                                Cet élément n’est pas lié au produit du catalogue <strong>{{label}}</strong>. Les valeurs spécifiées ici seront synchronisées avec le produit du catalogue correspondant uniquement si vous cochez la case « Synchroniser avec le catalogue ».
                            </div>
                            {{/if}}
                            <div class="errors"></div>
                            <fieldset>
                                <div class="field-label"></div>
                                <div class="field-type_"></div>
                            </fieldset>
                            <fieldset>
                                <div class="field-locked"></div>
                                <div class="field-description"></div>
                                <div class="field-mode"></div>
                                <div class="field-supplier_ht"></div>
                                <div class="field-ht"></div>
                                <div class="layout flex">
                                    <div class="col-md-6 field-quantity"></div>
                                    <div class="col-md-6 field-unity"></div>
                                </div>
                                <div class="layout flex">
                                    <div class="col-md-6 field-sync_catalog"></div>
                                </div>
                            </fieldset>
                        </div>
                        <footer>
                            <button 
                                class="btn btn-primary" 
                                type="submit" 
                                value="submit"
                                title="{{title}}"
                                aria-label="{{title}}"
                            >
                                <svg><use href="/static/icons/endi.svg#check"></use></svg>
                                Valider
                            </button>
                            <button class="btn" type="reset" value="submit">
                                Annuler
                            </button>
                        </footer>
                    </form>
                </div>
                {{#if add}}
                <div 
                    role="tabpanel" 
                    class="tab-pane" 
                    id="catalog-container"
                    aria-labelledby="catalog-tabtitle">
                </div>
                {{/if}}
            </div>
        </div>
    </div>
</section>
